﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>TopoLink</title>
<tags:import includes="jQV1.9,canvas"></tags:import>
<script>
var BACK_UP_LINE_COLOR = '#646464';
var ERROR_COLOR = '#FF0000';
var NE_COLOR = '#c8c8c8';
var LINE_WIDTH = 2;
var FONT_COLOR = '#000';
var MAIN_LINE_COLOR = '#01985E';
var ne1 = '';
var ne2 = '';
function init(){	

	//网元1
	$('canvas').drawRect({
	  fillStyle: NE_COLOR,
	  x: 350, 
	  y: 160,
	  width: 200,
	  height: 180,
	  strokeStyle: FONT_COLOR,
	  strokeWidth: 1
	});
	//网元2
	$('canvas').drawRect({
	  fillStyle: NE_COLOR,
	  x: 800, 
	  y: 160,
	  width: 200,
	  height: 180,
	  strokeStyle: FONT_COLOR,
	  strokeWidth: 1,
	  fromCenter: true
	});
	//line1
	$('canvas').drawVector({
	  strokeStyle: MAIN_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 400, y: 101,
	  a1: 90, l1: 357,
	});
	//line2
	$('canvas').drawVector({
	  strokeStyle: BACK_UP_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 400, y: 130,
	  a1: 90, l1: 357,
	});
	//line3
	$('canvas').drawVector({
	  strokeStyle: MAIN_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 400, y: 195,
	  a1: 90, l1: 357,
	});
	//line4
	$('canvas').drawVector({
	  strokeStyle: BACK_UP_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 400, y: 225,
	  a1: 90, l1: 357,
	});	

	drawLineInOut();	
}

function drawText(msg1, msg2){
	ne1 = msg1;
	ne2 = msg2;
	
	//text1
	$('canvas').drawText({
	  fillStyle: FONT_COLOR,	  
	  x: 315, y: 25,
	  fontSize: '20pt',	  
	  text: ne1,
	  // Measure (x, y) from the text's top-left corner
	  fromCenter: false,	  
	});
	//text2
	$('canvas').drawText({
	  fillStyle: FONT_COLOR,	  
	  x: 770, y: 25,
	  fontSize: '20pt',	  
	  text: ne2,
	  // Measure (x, y) from the text's top-left corner
	  fromCenter: false,	  
	});						
}

function drawDeviceNe1(){
	//网元1号入线1
	$('canvas').drawVector({
	  strokeStyle: MAIN_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 55, y: 115,
	  a1: 90, l1: 246
	});	
		
	//网元1号入线2
	$('canvas').drawVector({
	  strokeStyle: MAIN_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 55, y: 209,
	  a1: 90, l1: 246,
	});	
}

function drawDeviceNe2(){
	//网元2号输出1号线
	$('canvas').drawVector({
	  strokeStyle: MAIN_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 850, y: 114,
	  a1: 90, l1: 242,
	});		
			
	//网元2号主线
	$('canvas').drawVector({
	  strokeStyle: MAIN_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 850, y: 210,
	  a1: 90, l1: 242,
	});	
}

function drawLineInOut(){
	drawDeviceNe1();
	drawDeviceNe2();
	//line in #1 in 1
	$('canvas').drawVector({
	  strokeStyle: MAIN_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 295, y: 115,
	  a1: 82.5, l1: 105,
	});	
	//网元1，备线
	$('canvas').drawVector({
	  strokeStyle: BACK_UP_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,	  
	  arrowAngle: 90,
	  x: 295, y: 115,
	  a1: 98, l1: 109,
	});	
	

	//line out #2 in 1
	$('canvas').drawVector({
	  strokeStyle: MAIN_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 750, y: 195,
	  a1: 98, l1: 99,
	});	
	//line out #2 in 2 
	$('canvas').drawVector({
	  strokeStyle: BACK_UP_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,	  
	  arrowAngle: 90,
	  x: 750, y: 225,
	  a1: 81.5, l1: 100,
	});	
}

function simulateError(){
	//标红
	clearAll();
	init();
	line1('#c33');			
	//msg(300,90,FONT_COLOR,15,'线路断开，请检查!');
}

function clearAll(){
	$('canvas').clearCanvas();
}

function msg(x,y,color,size,msg){
	$('canvas').drawText({
	  fillStyle: color,	  
	  x: x,
	  y: y,
	  fontSize: size + 'pt',	  
	  text: msg,
	  // Measure (x, y) from the text's top-left corner
	  fromCenter: false,	  
	});
}

function line1(color){
	$('canvas').drawVector({
	  strokeStyle: color,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,
	  endArrow: true,
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 252, y: 100,
	  a1: 90, l1: 242,
	});	
}
//绘制三角
function drawTriangle(){
	// Draw a triangle	
	//最左边两个三角
	triangle(170,115,MAIN_LINE_COLOR, 90);
	triangle(170,209,MAIN_LINE_COLOR, 90*3);
	
	//中间4个三角	
	triangle(570,130,BACK_UP_LINE_COLOR, 90);	
	triangle(570,225,BACK_UP_LINE_COLOR, 90*3);
	
	//最右侧
	triangle(970,114,MAIN_LINE_COLOR, 90);
	triangle(970,210,MAIN_LINE_COLOR, 90*3);
}
function triangle(x, y, color, rotate){
	$('canvas').drawPolygon({
	  strokeStyle: color,
	  strokeWidth: 1,
	  fillStyle:color, 	
	  x: x,
	  y: y,
	  radius: 6,
	  sides: 3,
	  rotate: rotate
	});
}
function drawMainLineIn1(){
	//line in #2 in 1
	$('canvas').drawVector({
	  strokeStyle: MAIN_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 756, y: 100,
	  a1: 98, l1: 99,
	});	
}

function drawMainLineIn2(){
	//line in #2 in 2 
	$('canvas').drawVector({
	  strokeStyle: BACK_UP_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,	  
	  arrowAngle: 90,	  
	  x: 756, y: 130,
	  a1: 81, l1: 99,
	});	
}

function drawMainLineOut1(){
	//line out #2 in 1
	$('canvas').drawVector({
	  strokeStyle: MAIN_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: 295, y: 209,
	  a1: 82.5, l1: 109,
	});	
}

function drawMainLineOut2(){
	//line out #2 in 2 
	$('canvas').drawVector({
	  strokeStyle: BACK_UP_LINE_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,	  	  
	  arrowAngle: 90,
	  x: 300, y: 210,
	  a1: 98, l1: 109,
	});	
}
//启用备用线路
function inError(){
	ready();
	clearAll();
	init();
	drawMainLineIn2();
	drawMainLineOut1();
	
	//line1变成红色
	//$('canvas').drawVector({
	//  strokeStyle: ERROR_COLOR,
	//  strokeWidth: LINE_WIDTH,
	//  rounded: true,	  
	//  arrowRadius: 15,
	//  arrowAngle: 90,
	//  x: 400, y: 101,
	//  a1: 90, l1: 357,
	//});

	
	//msg(545,76,FONT_COLOR,10,'主线断开');
	drawTriangle();	
	triangle(570,100,MAIN_LINE_COLOR, 90);	
	triangle(570,195,MAIN_LINE_COLOR, 90*3);	
	errorCross(586,95);
	
	//文字备注
	//Line1
	msg(545,76,FONT_COLOR,10,'主用');
	//Line2
	msg(545,110,FONT_COLOR,10,'备用');
	//Line3
	msg(545,172,FONT_COLOR,10,'主用');
	//Line4
	msg(545,205,FONT_COLOR,10,'备用');
	
	drawDots();
	
	//绘制网元1，网元2	
	drawText(ne1, ne2);
}

//红叉
function errorCross(x, y){
	$('canvas').drawVector({
	  strokeStyle: ERROR_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: x, y: y,
	  a1: 136, l1: 15,
	});
	$('canvas').drawVector({
	  strokeStyle: ERROR_COLOR,
	  strokeWidth: LINE_WIDTH,
	  rounded: true,	  
	  arrowRadius: 15,
	  arrowAngle: 90,
	  x: x, y: y+10,
	  a1: 48, l1: 15,
	});
}

function outError(){
	ready();
	clearAll();
	init();
	drawMainLineOut2();
	drawMainLineIn1();
	
	//line3 异常
	//$('canvas').drawVector({
	//  strokeStyle: ERROR_COLOR,
	//  strokeWidth: LINE_WIDTH,
	//  rounded: true,	  
	//  arrowRadius: 15,
	//  arrowAngle: 90,
	//  x: 400, y: 195,
	//  a1: 90, l1: 357,
	//});
		
	//msg(545,172,FONT_COLOR,10,'主线断开');
	drawTriangle();
	//中间第一个
	triangle(570,100,MAIN_LINE_COLOR, 90);
	triangle(570,195,MAIN_LINE_COLOR, 90*3);	
	errorCross(586,190);
	
	//Line1
	msg(545,76,FONT_COLOR,10,'主用');
	//Line2
	msg(545,110,FONT_COLOR,10,'备用');
	//Line3
	msg(545,172,FONT_COLOR,10,'主用');
	//Line4
	msg(545,205,FONT_COLOR,10,'备用');
	
	drawDots();	
	
	//绘制网元1，网元2	
	drawText(ne1, ne2);
}

function drawDots(){
	// 网元1
	dot(300, 115);
	dot(300, 208);
	//----------//
	dot(400, 102);
	dot(400, 130);
	dot(400, 195);
	dot(400, 225);
	
	//网元2
	dot(760, 102);
	dot(760, 130);
	dot(760, 195);
	dot(760, 225);
	//----------//
	dot(850, 114);
	dot(850, 209);	
}

function dot(x, y){
	$('canvas').drawArc({
	  strokeStyle: '#000',
	  strokeWidth: 5,	  
	  x: x, 
	  y: y,
	  radius: 2,
	  closed: true
	});
}

function ready(){
  clearAll();
  init();
  drawMainLineIn1();
  drawMainLineOut1();  
  drawTriangle(); 
  drawDots();
  
  //中间第一个
  triangle(570,100,MAIN_LINE_COLOR, 90);
  //中间第三个
  triangle(570,195,MAIN_LINE_COLOR, 90*3);
  
  //Line1
  msg(545,76,FONT_COLOR,10,'主用');
  //Line2
  msg(545,110,FONT_COLOR,10,'备用');
  //Line3
  msg(545,172,FONT_COLOR,10,'主用');
  //Line4
  msg(545,205,FONT_COLOR,10,'备用');
  
 
}


//设置网元的名称
function setNENames(ne1, ne2){
	clearAll();
	ready();
	drawText(ne1, ne2);
}

$(function(){
	ready();
	var fromName = '${fromName}';
    var toName = '${toName}';
    //alert(fromName+','+toName);
    setNENames(fromName,toName);
});

</script>
</head>
<body>
<div style="background: url('/webems/static/modules/topo/images/bg.png');">
<input type="button" onclick="inError()" value="主线路输入异常"/>
<input type="button" onclick="outError()" value="主线路输出异常"/>
<input type="button" onclick="ready()" value="重置"/>
<canvas id="mainStage" width="1248" height="600">你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> 
</div>
</body>
</html>
